<template>
  <div>
    <div class="tab border-bottom">
      <div class="tab-item">
        <router-link to="/Goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/Ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/Sells">商家</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Goods from '../../goods/Goods'
import Ratings from '../../ratings/Ratings'
import Sells from '../../sells/Sells'
export default {
  name: 'HomeTab',
  comments: {
    Goods,
    Ratings,
    Sells
  }
}
</script>

<style lang="stylus" scoped>
  .tab
    display: flex
    width: 100%
    .tab-item
      height:40px
      line-height: 40px
      flex: 1
      font-size: 14px
      text-align: center
      a
        display block
        color rgb(77,85,93)
      &.active
        color red
</style>
